<template>
  <el-card>
    <div class="category_header">
      <el-button type="primary" @click="addCategory">添加分类</el-button>
      <el-input
        placeholder="请输标题入关键字"
        v-model="pageSetting.title_contains"
        class="input-with-select"
      >
        <el-button
          slot="append"
          @click="filterFn"
          icon="el-icon-search"
        ></el-button>
      </el-input>
    </div>
    <hr class="hr" />
    <div class="category_tabel">
      <el-table
        :data="categoryList[page]"
        border
        :height="600"
        style="width: 100%"
      >
        <el-table-column prop="image" label="图片">
          <template slot-scope="{ row }">
            <img width="120px" :src="row.image" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="desc" label="介绍"> </el-table-column>
        <el-table-column>
          <template slot-scope="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row.id)"
              >编辑</el-button
            >
            <el-button type="danger" size="small" @click="handleDel(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total,prev, pager, next"
        :page-size="limit"
        align="center"
        @current-change="curChange"
        :total="$store.getters.categoryList.length"
      >
      </el-pagination>
    </div>
    <AddCategory ref="addCategory" @updateCategory="getCategoryList" />
  </el-card>
</template>

<script>
import { getCategoryCount, delCategory } from "../../api/category";
import AddCategory from "./components/add-category.vue";
import { dimensionOneToTwo } from "@/share";
export default {
  components: {
    AddCategory,
  },
  async created() {
    await this.getCategoryList();
  },
  data() {
    return {
      categoryList: [],
      pageSetting: {
        _limit: 5,
        _start: 0,
        title_contains: "",
      },
      count: 0,
      limit: 5,
      page: 0,
    };
  },
  methods: {
    //   筛选数据
    filterFn() {
      if (!this.pageSetting.title_contains) {
        this.$message.warning("标题关键字没有输入！");
        return;
      }
      this.getCategoryList();
      //this.pageSetting.title_contains = ''
    },
    // 获取分类列表数据
    async getCategoryList() {
      // 获取分类的数量
      this.pageSetting._limit = await getCategoryCount();
      await this.$store.dispatch("category/getCategoryList", this.pageSetting);
      this.categoryList = dimensionOneToTwo(
        this.$store.getters.categoryList,
        this.limit
      );
    },
    // 分页功能
    curChange(curPage) {
      this.page = curPage - 1;
      this.getCategoryList();
    },
    // 添加分类功能
    addCategory() {
      this.$refs.addCategory.isShowDialog = true;
    },
    // 编辑功能
    handleEdit(id) {
      this.$refs.addCategory.isShowDialog = true;
      this.$refs.addCategory.editCategory(id);
    },
    // 删除分类功能
    async handleDel(id) {
      await this.$confirm("确定删除吗");
      await delCategory(id);
      if (this.categoryList[this.page].length === 1 && this.page > 0) {
        this.page--;
      }
      this.getCategoryList();
    },
  },
  watch: {
    "pageSetting.title_contains"(newVal) {
      if (!newVal) this.getCategoryList();
    },
  },
};
</script>

<style lang="less" scoped>
.category_header {
  display: flex;
  justify-content: space-between;
  .el-input,
  .el-input-group {
    width: 500px;
  }
}
hr {
  margin: 20px 0;
}
.el-table-column {
  width: 100%;
  .categoryImg {
    width: 120px;
  }
}
img {
  width: 184px !important;
  height: 160px;
}

.hr {
  border: none;
  height: 1px;
  background-color: rgba(204, 204, 204, 0.267);
  // margin: 20px 0;
}
</style>